Bilder kreisförmig darstellen
Hallo,
ich möchte gerne 20 Bilder mittig auf dem Bildschirm kreisförmig darstellen. Die Bilder sollen wie ein Fächer übereinander liegen.
füge ich " position:absolute; " ein liegen alle Bilder übereinander.
Kommentar abgeben zu diesen Beitrag/Code ?Dann hier klicken
Der hier verwendete Code
<script src="/js_webseite/jquery.js"></script>
<style>
#container {
width:400px;
}
.box {
border-radius:50%;
height:120px;
margin:18px;
position:absolute;
width:120px;
padding:5px;
}
img{
height:50px;
width:50px;
border:1px solid red;
}
</style>
<div id="container"></div>
<script>
var total=9;//menge bilder
var radius=150;//in pixel von mittel achse
var x=150;//mittelpunkt x
var y=150;//"mittelpunkt y
var classname='.box';//Class name von img
for(i=1;i<=total;i++){
$('#container').append('<img src="/image/150x150.png" class="box">');
}
$(classname).each(function(index) {
$(this).css('margin-left', Math.floor(Math.cos(Math.PI * 2 / total * index) * radius) + x + 'px');
$(this).css('margin-top', Math.floor(Math.sin(Math.PI * 2 / total * index) * radius ) + y + 'px');
});
</script>